<template>
	<view>
		<cu-custom  bgColor="bg-black-two"  :isBack="true">
			<block slot="content">积分中心</block>
		</cu-custom>
		<view class="my-bg">
			<view class="flex justify-center" style="padding-top: 10px;">
				<text style="font-size: 20px;color: #fff;">{{Number(jifen)}}</text>
			</view>
			<view class="flex justify-center">
				<text style="font-size: 10px;margin-bottom: 10px;">积分</text>
			</view>
			<view class="flex justify-between" style="padding: 10px 50px;">
				<button @click="showModal('tabModel')" class="cu-btn bg-grey loginout-btn" style="width: 40%;">提现</button>
				<button @longpress="test()"  @click="linktoPage('/pages/center/jifen/goods')" class="cu-btn bg-grey loginout-btn" style="width: 40%;background-color: #2196F3;">兑换</button>
			</view>
		</view>
		<view class="my-bg">
			<view class="flex justify-between my-title-bg"  style="font-weight: bold;color: white;">
				<view>积分变动明细</view>
			</view>
			<view v-for="(item,index) in detailList" :key="index"
			:class="index == Number(detailList.length-1) ? 'my-title-bg-last':'my-title-bg'">
				<view class="flex justify-between ">
					<view>{{item.desc}}</view>
					<view><text v-if="item.type">+</text><text v-else >-</text>{{item.number}}</view>
				</view>
				<view class="flex justify-between" style="color: #6A6A71;">
					<view>{{item.create_time}}</view>
					<!-- <view v-if="item.type">收入</view>
					<view v-else>支出</view> -->
				</view>
			</view>	
		</view>

		
		<!-- 模态框：点击提现显示收款码提现、银行卡提现 -->
		<view class="cu-modal" :class="modalName=='tabModel'?'show':''" style="z-index: 2;">
			<view class="cu-dialog" style="background-color:#FFF;height:350px;">
				<view style="width:90%;margin:0 auto;">
					<view class="flex">
						<scroll-view scroll-x class="bg-white nav text-center">
							<view class="cu-item" :class="index==TabCur?'text-blue cur':''" 
								v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
								{{item}}
							</view>
						</scroll-view>	
						<view class="action" @tap="hideModal" style="padding-top: 10px;">
							<text class="cuIcon-close text-blue text-lg" style="color: #847d7d;"></text>
						</view>
					</view>
					
					<!-- TabCur：0 微信支付宝提现 -->
					<view v-if="!TabCur" style="padding-top: 15px;">
						<view class="open-block" style="padding-bottom: 10px;text-align: left;color: #100f0f;">
							<view style="margin-top:20px">
								<view class="flex">
									<view style="width: 35%;">
										请输入金额
									</view>
									<view>
										<input class="uni-input" placeholder="请输入提现金额（元）" placeholder-style="color:#B0B0B0;font-size:15px;"
										v-model='tixianNumber' style="color:#00A99D;font-size:18px;" type="number"></input>
										<view style="height: 1px;background-color: #00A99D;margin:10px auto"></view>
									</view>
								</view>
								<view class="flex">
									<view style="width: 35%;">
										请上传收款码
									</view>
									<view class="grid col-4 grid-square flex-sub">
										<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]" style="text-align: left;">
										 <image :src="imgList[index]" mode="aspectFill"></image>
											<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
												<text class='cuIcon-close'></text>
											</view>
										</view>
										<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
											<text class='cuIcon-cameraadd'></text>
										</view>
									</view>
								</view>
								<view class="flex">
									<view style="width: 35%;">
										请输入手机号
									</view>
									<view>
										<input class="uni-input" placeholder="请输入手机号" placeholder-style="color:#B0B0B0;font-size:15px;"
										v-model='phone' style="color:#00A99D;font-size:18px;" type="number"></input>
										<view style="height: 1px;background-color: #00A99D;margin:10px auto"></view>
										<view class="text-gray" style="font-size: 12px;text-align: right;">
											此手机号仅用于打款失败时联系
										</view>
									</view>
								</view>
						</view>
						<view class="flex flex-wrap justify-between align-center" style="width:220px;margin:24px auto;">
							<button @click="hideModal()" class="cu-btn out-btn" style="background-color:#fff;border: 1px solid #00A99D;">取消</button>
							<button @click="tixian(1)" class="cu-btn confirm-btn" style="background-color:#00A99D;">确认</button>
						</view>
					</view>
					</view>
					<!-- TabCur：1 银行卡提现 -->
					<view v-else style="padding-top: 15px;">
						<view class="open-block" style="padding-bottom: 10px;text-align: left;color: #100f0f;">
							<view style="margin-top:20px">
								<view class="flex">
									<view style="width: 35%;">
										请输入姓名
									</view>
									<view>
										<input class="uni-input" v-model='name' 
										placeholder="请输入姓名" placeholder-style="color:#B0B0B0;font-size:15px;"
										style="color:#00A99D;font-size:18px;"></input>
										<view style="height: 1px;background-color: #00A99D;margin:10px auto"></view>
									</view>
								</view>
								<view class="flex">
									<view style="width: 35%;">
										请输入金额
									</view>
									<view>
										<input class="uni-input" v-model='tixianNumber' type="number" 
										placeholder="请输入提现金额（元）" placeholder-style="color:#B0B0B0;font-size:15px;"
										style="color:#00A99D;font-size:18px;"></input>
										<view style="height: 1px;background-color: #00A99D;margin:10px auto"></view>
									</view>
								</view>
								<view class="flex">
									<view style="width: 35%;">
										请输入银行卡号
									</view>
									<view>
										<input class="uni-input" v-model='bankCode' type="number" 
										placeholder="请输入银行卡号" placeholder-style="color:#B0B0B0;font-size:15px;"
										style="color:#00A99D;font-size:18px;"></input>
										<view style="height: 1px;background-color: #00A99D;margin:10px auto"></view>
									</view>
								</view>
							</view>
							<view style="clear:both"></view>
						</view>
						
						<view class="flex flex-wrap justify-between align-center" style="width:200px;margin:24px auto;">
							<button @click="hideModal()" class="cu-btn out-btn" style="background-color:#fff;border: 1px solid #00A99D;">取消</button>
							<button @click="tixian(2)" class="cu-btn confirm-btn" style="background-color:#00A99D;">确认</button>
						</view>
					</view>
				</view>
			</view>
		</view>	
		
	</view>
</template>

<script>
	var _self;
	export default{
		data(){
			return{
				jifen:0,//当前积分
				modalName:'',
				tixianNumber:'',//提现金额
				bankCode:'',//银行卡号
				detailList:[],//积分明细
				name:'',
				TabCur: 0,//tab导航栏
				scrollLeft: 0,
				tabList:['微信/支付宝','银行卡'],
				imgList: [],//图片上传
				phone:'',
				imgUrl:''
				
			}
		},
		onShow() {
			_self = this;
			//获取当前余额和积分
			this.getInitData();
		},
		methods:{
			//tab导航栏
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.imgUrl = '';
				this.imgList = [];
				this.tixianNumber = '';
				this.phone = '';
				this.tixianNumber = '';
				this.bankCode = '';
				this.name = ''; 
			},
			test(){
				//跳转到vip商品页
				uni.navigateTo({
					url:'/pages/center/jifen/vip-goods'
				})
			},
			//获取当前用户的余额和积分
	async	getInitData(){
				this.TabCur = 0;
				this.scrollLeft= 0;
				let [err,res] = await this.$http.get('getAccountList',{
					cate : 1
				},{
					token:true,
					checkToken:true ,
				});
				// 失败
				if (!this.$http.errorCheck(err,res)){
					uni.hideLoading();
					return false;
				}
				uni.hideLoading();
				this.detailList = res.data.data.list
				this.jifen = res.data.data.userinfo.jifen;
				//更新本地存储的积分
				let userinfo = uni.getStorageSync("userinfo");
				userinfo.jifen = this.jifen;
				uni.setStorageSync("userinfo",userinfo);
			},
			showModal(name){
				this.modalName=name
			},
			hideModal() {
				this.modalName = null;
				this.imgUrl = '';
				this.imgList = [];
				this.tixianNumber = '';
				this.phone = '';
				this.tixianNumber = '';
				this.bankCode = '';
				this.name = ''; 
			},
			//积分提现
	async	tixian(type){
				if (type == 1) {
					//微信支付宝
					if (this.tixianNumber== null || this.tixianNumber == '') {
						uni.showToast({
							title:'请输入提现金额',
							icon:'error'
						});
					} else if (this.imgUrl == null || this.imgUrl == '') {
						uni.showToast({
							title:'请上传收款码',
							icon:'error'
						});
					}else if (this.phone== null || this.phone == '') {
						uni.showToast({
							title:'请输入手机号',
							icon:'error'
						});
					} else {
						console.log(this.imgUrl);
						let [err,res] = await this.$http.post('uploadPost',{
							number:this.tixianNumber,
							phone:this.phone,
							imgUrl:this.imgUrl,
							userId:uni.getStorageSync("userinfo").id
						},{
							token:true,
							checkToken:true ,
						});
						// 失败
						if (!this.$http.errorCheck(err,res)){
							uni.hideLoading();
							return false;
						}
						uni.hideLoading();
						
						console.log(res.statusCode);
						if (res.statusCode == 500) {
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							});
						} else {
							//关闭模态框
							this.modalName = null;
							this.imgUrl = '';
							this.imgList = [];
							this.tixianNumber = '';
							this.phone = '';
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							});
							this.getInitData();	
						}
					}
				} else {
					//银行卡
					if  (this.name== null || this.name == '') {
						uni.showToast({
							title:'请输入姓名',
							icon:'error'
						});
					} else if (this.tixianNumber== null || this.tixianNumber == '') {
						uni.showToast({
							title:'请输入提现金额',
							icon:'error'
						});
					} else if  (this.bankCode== null || this.bankCode == '') {
						uni.showToast({
							title:'请输入银行卡号',
							icon:'error'
						});
					} else {
							let [err,res] = await this.$http.post('getBankMoney',{
								name:this.name,
								number : this.tixianNumber,
								yinhangka : this.bankCode
							},{
								token:true,
								checkToken:true ,
							});
							// 失败
							if (!this.$http.errorCheck(err,res)){
								uni.hideLoading();
								return false;
							}
							uni.hideLoading();
							if (res.statusCode == 500) {
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								});
							} else {
								this.getInitData();
								this.modalName = null;
								this.tixianNumber = '';
								this.bankCode = '';
								this.name = ''; 
								uni.showToast({
									title:'提交成功',
									icon:'success'
								});
							}
							
					}
				}
			},
			//跳转页面
			linktoPage(urlStr){
				uni.navigateTo({
					url:urlStr
				})
			},
			//充值-微信支付
			wxpayAuth(){
				uni.request({
					url: 'https://qmes.dascloud.cn/wxpayv3/?total=1',
					method: 'GET',
					header: {  
					    'Content-Type': 'application/x-www-form-urlencoded'  
					},
					//sslVerify: false,//本地模拟器调试
					success: ress => {
						console.log(ress.data);
						uni.getProvider({
							service: 'payment',
							success:function(res){
								console.log(res);
								if (~res.provider.indexOf('wxpay')) {
									uni.requestPayment({
										provider: 'wxpay',
										orderInfo: ress.data, //微信、支付宝订单数据
										success: function (res) {
											_self.modalName = null;
											_self.getInitData();//更新余额
											console.log('success:' + JSON.stringify(res));
										},
										fail: function (err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								}
							}
						})
					}
				});
			
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						uni.showLoading({
							title:'收款码上传中',
							mask:true
						})
						uni.uploadFile({
							url: 'https://new.dascloud.cn/api/v1/upload', //仅为示例，非真实的接口地址
							filePath: this.imgList[0],
							name: 'photo',
							formData: {},
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								this.imgUrl = uploadFileRes.data;
								if(this.imgUrl !== '' || this.imgUrl !== null){
									uni.hideLoading();
								}
								
							}
						});
						
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
		}
		
	}
</script>

<style>
	.my-title-bg{
		border-bottom: 1px solid #6A6A71;margin: 10px;padding: 0px 5px 5px 5px;
	}
	.loginout-btn{
		background-color:#22B573;border-radius: 20px;
	}
	.uni-input-placeholder{
		color: #262626;
	}
	.out-btn{
		border-radius: 20px;
		width: 40%;color: #B0B0B0;
	}
	.confirm-btn{
		background-color:#00A99D;border-radius: 20px;
		width: 40%;color: #fff;
	}
</style>